<template>
  <!-- 折线图组件 -->
  <div id="main" class="linechart2" style="width:600px;height:500px;" />
</template>
<script>

export default {
  name: 'Linechart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      var myChart = this.$echarts.init(document.getElementById('main'))
      //   绘制图标
      myChart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['星期一', '星期二', '星期三', '星期四', '星期无', '星期六', '星期日'],
          axisLabel: {
            interval: 0,
            rotate: 60 // 控制坐标的倾斜度
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '小圆点'
          },
          {
            type: 'value',
            name: '虚线'
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {
              color: 'rgba(90,139,255,.2)'
            },
            symbol: 'emptyCircle',
            symbolSize: 10,
            emphasis: {
              focus: 'series' // 小圆点
            }
          },
          {

            data: [820, 900, 901, 834, 1290, 230, 1020],
            type: 'line',
            itemStyle: {
              color: 'red'
            },
            areaStyle: {
              color: 'rgba(90,139,255,.2)'
            },
            lineStyle: {
              type: 'dashed' // 设置为虚线
            }

          }
        ]
      })
    }
  }
}
</script>
